<div class="screen">
    <div class="row">
        <input id="button-1" name="button-1" type="checkbox"></input>
        <label for="button-1" class="button">➡</label>

        <input id="dot" name="dot" type="checkbox" class="dot"></input>
        <label for="dot" class="dot"></label>

        <input id="button-2" name="button-2" type="checkbox"></input>
        <label for="button-2" class="button button-square button-border">⬅</label>
    </div>
    <div class="row">
        <div class="bevel">
            <strong>Let's go on an adventure!</strong>
            <button class="button button-round"><span class="arrow"></span></button>
        </div>
    </div>
</div>
<style>
    // TODO: More neumorphic UI components, not just buttons and checkboxes/radios.

    $baseHue: 215;
    $baseSat: 50%;
    $baseLum: 90;
    $baseColor: hsl($baseHue, $baseSat, $baseLum);
    $bgColor: hsl($baseHue, $baseSat, $baseLum - 2);

    body {
        align-items: center;
        background-color: $bgColor;
        display: flex;
        flex-direction: column;
        height: 100vh;
        justify-content: center;
        margin: 0;
        width: 100vw;

        * {
            box-sizing: border-box;
            font-family: Montserrat, sans-serif;
        }
    }

    .bevel {
        align-items: center;
        border-radius: 12px;
        box-shadow:
            3px 3px 6px 3px rgba(0, 0, 0, 0.1),
            -3px -3px 3px 3px rgba(247, 251, 255, 0.5),
            3px 3px 8px 2px rgba(0, 0, 0, 0) inset,
            -3px -3px 7px 2px rgba(247, 251, 255, 0) inset;
        display: flex;
        justify-content: space-around;
        padding: 12px 24px;
        ;
        transition: border 0.1s ease, box-shadow 0.1s ease;

        span {
            margin-right: 20px;
        }

        strong {
            margin-right: 20px;
        }
    }

    button {
        .arrow {
            border-right: 2px solid hsl($baseHue, $baseSat, 80%);
            border-top: 2px solid hsl($baseHue, $baseSat, 80%);
            display: inline-block;
            height: 16px;
            margin-right: 0;
            transform: translateX(-4px) rotate(45deg);
            width: 16px;
        }
    }

    .button {
        align-items: center;
        background-color: $baseColor;
        border: 3px solid transparent;
        box-shadow:
            3px 3px 6px 3px rgba(0, 0, 0, 0.1),
            -3px -3px 3px 3px rgba(247, 251, 255, 0.5),
            3px 3px 8px 2px rgba(0, 0, 0, 0) inset,
            -3px -3px 7px 2px rgba(247, 251, 255, 0) inset;
        color: transparent;
        cursor: pointer;
        display: flex;
        font-size: 1.5em;
        height: 48px;
        justify-content: center;
        position: relative;
        -webkit-text-stroke: 1px #7989A4;
        text-stroke: 1px solid #7989A4;
        transition: border 0.1s ease, box-shadow 0.1s ease, color 0.1s ease, text-stroke 0.1s ease, -webkit-text-stroke 0.1s ease;
        width: 48px;

        &-border {
            background: linear-gradient($baseColor, $baseColor),
                linear-gradient(135deg, #fff 0%, #B5BEC8 100%);
            border: 6px solid transparent;
            border-radius: 14px;
            background-repeat: no-repeat;
            background-origin: padding-box, border-box;

            &::before {
                border: 3px solid $baseColor;
                border-radius: 10px;
                bottom: -3px;
                content: "";
                left: -3px;
                right: -3px;
                position: absolute;
                top: -3px;
            }
        }

        &-round {
            border-radius: 50%;

            &:active {
                box-shadow:
                    3px 3px 6px 3px rgba(0, 0, 0, 0),
                    -3px -3px 3px 3px rgba(247, 251, 255, 0),
                    3px 3px 8px 2px rgba(0, 0, 0, 0.1) inset,
                    -3px -3px 7px 2px rgba(247, 251, 255, 0.7) inset;
            }
        }

        &-square {
            height: 64px;
            width: 64px;
        }
    }

    .dot {
        background: linear-gradient(135deg, rgba(247, 251, 255, 0.7) 20%, rgba(0, 0, 0, 0.125) 100%);
        border: 2px solid $baseColor;
        border-radius: 16px;
        box-shadow: 3px 3px 6px 2px rgba(0, 0, 0, 0.1), -3px -3px 5px 1px rgba(247, 251, 255, 0.5);
        cursor: pointer;
        height: 32px;
        margin: 0 16px;
        width: 32px;
    }

    .row {
        align-items: center;
        display: flex;
        justify-content: space-around;
        width: 80%;

        input {
            display: none;

            &:checked {
                &+.button {
                    border: 3px solid lighten(hsl(210, 50%, 90%), 2);
                    box-shadow:
                        3px 3px 6px 3px rgba(0, 0, 0, 0),
                        -3px -3px 3px 3px rgba(247, 251, 255, 0),
                        3px 3px 8px 2px rgba(0, 0, 0, 0.1) inset,
                        -3px -3px 7px 2px rgba(247, 251, 255, 0.7) inset;
                    color: #7989A4;
                    -webkit-text-stroke: 1px transparent;
                    text-stroke: 1px transparent;

                    &.button-border {
                        border: 6px solid transparent;
                    }
                }

                +.dot {
                    background: linear-gradient(-45deg, rgba(247, 251, 255, 0.4) 20%, rgba(0, 0, 0, 0.2) 100%);
                }
            }
        }
    }

    .screen {
        align-items: center;
        background: linear-gradient(135deg, $baseColor, $baseColor);
        border-radius: 32px;
        box-shadow: inset 5px 5px 7px 5px rgba(0, 0, 0, 0.1), inset -5px -5px 7px 5px rgba(247, 251, 255, 0.6);
        display: flex;
        flex-direction: column;
        height: 300px;
        justify-content: space-around;
        width: 60vw;
    }
</style>